<template>
  <!-- 工单详情  -->
  <div style="display:flex;flex-direction:column;width:100%;margin-top:25px">
    <div style="margin-bottom:10px;background:#eee;line-height:40px;padding-left:5px">工单详情</div>
    <div>
      <p-form :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }" style="margin-top:10px">
        <p-row :guter="20">
          <p-col :span="8">
            <p-form-item label="工单号">
              <p-input v-model="idGetInfo.productionno" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="工序工单号">
              <p-input v-model="idGetInfo.processbillno" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="二级工序">
              <p-input v-model="idGetInfo.processTwoname" disabled></p-input>
            </p-form-item>
          </p-col>
        </p-row>
        <p-row :guter="20">
          <p-col :span="8">
            <p-form-item label="产品类别">
              <p-input v-model="idGetInfo.productCategory" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="产品类型">
              <p-input v-model="idGetInfo.productType" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="任务来源">
              <p-input v-model="idGetInfo.taskSource" disabled></p-input>
            </p-form-item>
          </p-col>
        </p-row>
        <p-row :guter="20">
          <p-col :span="8">
            <p-form-item label="工单类型">
              <p-input disabled
                v-model="idGetInfo.processType ===0? '标准工单':idGetInfo.processType ===1? '返修工单':idGetInfo.processType ===2? '拆零工单':idGetInfo.processType ===3? '改配工单':idGetInfo.processType ===4? '中试首样工单':idGetInfo.processType ===5? '非常规工单':idGetInfo.processType ===6? '中试小批量工单':idGetInfo.processType ===7? '工序外协工单':idGetInfo.processType ===8? '维修工单':idGetInfo.processType ===9? '科研加工工单':''"
              ></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="自制/外协">
              <p-input v-model="idGetInfo.selfControl" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="线体">
              <p-input v-model="idGetInfo.linename" disabled></p-input>
            </p-form-item>
          </p-col>
        </p-row>
        <p-row :guter="20">
          <p-col :span="8">
            <p-form-item label="计划开始时间">
              <p-input v-model="JHTime" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="计划完成时间">
              <p-input v-model="WCTime " disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="预计下发时间">
              <p-input v-model="YJtime" disabled></p-input>
            </p-form-item>
          </p-col>
           
        </p-row>
        <p-row :guter="20">
          <p-col :span="8">
            <p-form-item label="实际下发时间">
              <p-input v-model=" SJtime" disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="齐套状态">
              <p-input disabled
                v-model="idGetInfo.qistate === 0? '未齐套':idGetInfo.qistate === 1? '齐套':idGetInfo.qistate === 2? '外协已确认':''"
              ></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="BOM状态">
              <p-input disabled></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="8">
            <p-form-item label="BOM版本">
              <p-input v-model="idGetInfo.bomversions" disabled></p-input>
            </p-form-item>
          </p-col>
         
        </p-row>
      </p-form>
    </div>

    <div style="margin-top:10px;background:#eee;line-height:40px;padding-left:5px">工单BOM</div>
    <div>
      <!--工单BOM表格 -->
      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="defColumns"
        :scroll="tableScroll"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
        :customRow="clickThenSelect"
        @change="handleTableChange"
        style="margin-top:20px"
      >
        <template slot="layoutBalance" slot-scope="layoutBalance">
          <a href>编辑</a>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt="图片不存在"
            style="max-width:80px;font-size: 12px;font-style: italic;"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <p-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)"
          >下载</p-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <p-divider type="vertical" />
          <p-dropdown>
            <a class="ant-dropdown-link">
              更多
              <p-icon type="down" />
            </a>
            <p-menu slot="overlay">
              <p-menu-item>
                <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </p-popconfirm>
              </p-menu-item>
              <template
                v-if="cgButtonLinkList && cgButtonLinkList.length>0"
                v-for="(btnItem,btnIndex) in cgButtonLinkList"
              >
                <p-menu-item :key=" 'cgbtnLink'+btnIndex " v-if="showLinkButton(btnItem,record)">
                  <a
                    href="javascript:void(0);"
                    @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)"
                  >
                    <p-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                    {{ btnItem.buttonName }}
                  </a>
                </p-menu-item>
              </template>
            </p-menu>
          </p-dropdown>
        </span>
      </p-table>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { postAction, getAction, deleteAction } from "@/api/manage";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { timestampToDatetime } from "@/utils/util";
import Vue from "vue";

export default {
  name: "",
  mixins: [JeecgListMixin],
  props: {
    rowId: {
      type: Number,
    },
  },
  mounted() {
    console.log(this.rowId);
    this.loadData();
  },
  watch: {
    rowId: {
      immediate: true,
      handler(val) {
        this.loadData();
      },
    },
  },
  data() {
    return {
      JHTime: "",
      WCTime: "",
      moment,
      YJtime:'',
      SJtime:'',
      //id get info
      idGetInfo: {},
      EnhanceJS: "",
      cgButtonLinkList: [],
      cgButtonList: [],
      title: "", //存表名
      groupTag: [],
      queryInfo: [],
      code: "",
      // 表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: "物料编码",
          dataIndex: "productcode",
          key: "mname",
          // width: "15%",
          align: "center",
          scopedSlots: { customRender: "mname" },
        },
        {
          title: "物料描述",
          dataIndex: "sprc",
          key: "sprc",
          // width: "40%",
          align: "center",
          scopedSlots: { customRender: "sprc" },
        },
        {
          title: "单位",
          dataIndex: "unit",
          key: "unit",
          // width: "40%",
          align: "center",
          scopedSlots: { customRender: " content" },
        },

        {
          title: "工站所需数量",
          dataIndex: "plannedQty",
          key: "plannedQty",
          align: "center",
          scopedSlots: { customRender: "plannedQty" },
        },
        {
          title: "当前库位",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" },
        },
        {
          title: "领料方式",
          dataIndex: "",
          key: "",
          align: "center",
          scopedSlots: { customRender: "" },
        },
        {
          title: "工站编码",
          dataIndex: "processTwocode",
          key: "processOrder",
          align: "center",
          scopedSlots: { customRender: "processOrder" },
        },
        {
          title: "工站",
          dataIndex: "processTwoname",
          key: "sn",
          align: "center",
          scopedSlots: { customRender: "sn" },
        },
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        //根据id获取工序工单计划
        list: "/mes-manufacture/mfProcess/",
      },
    };
  },
  watch:{
    idGetInfo(){
      console.log('a')
      if(this.idGetInfo.selfControl==0){
        this.idGetInfo.selfControl="未齐套"
      }else if(this.idGetInfo.selfControl==1){
        this.idGetInfo.selfControl="齐套"
      }else if(this.idGetInfo.selfControl==2){
        this.idGetInfo.selfControl="外协已确认"
      }
    }
  },
  created() {
    this.initColumns();
    this.setdefColumns();
  },

  methods: {
    timestampToDatetime,
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            // this.onSelectChange(record.id.split(","), [record]);
          },
        },
      };
    },
    tableScroll: function () {
      if (this.columns.length > 13) {
        return { x: this.columns.length * 150 - 450 };
      }
    },
    setdefColumns() {
      if (this.columns.length > 13) {
        let arrLength = this.columns.length - 1;
        this.columns.forEach((item, index) => {
          item["width"] = 130;
        });
        this.columns[arrLength]["fixed"] = "right";
        this.columns[0]["fixed"] = "left";
        this.columns[1]["fixed"] = "left";
      }
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        });
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter((item) => {
          if (item.key == "rowIndex" || item.dataIndex == "action") {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        });
        this.columns = cols;
      }
    },

    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000);
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter((item) => {
        if (item.key == "rowIndex" || item.dataIndex == "action") {
          return true;
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true;
        }
        return false;
      });
      this.columns = cols;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.selectedMainId = "";
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = selectedRowKeys[0];
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!");
        return;
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.onClearSelected();
      var params = this.getQueryParams(); //查询条件
      this.loading = true;
      getAction(this.url.list + this.rowId).then((res) => {
        if (res.success) {
          this.dataSource = res.data.details;
          this.ipagination.total = res.data.details.total;
          this.idGetInfo = res.data;
          this.JHTime = this.moment(this.idGetInfo.starttime).format('YYYY-MM-DD 00:00:00');
          this.WCTime  = this.moment(this.idGetInfo.completiontime).format('YYYY-MM-DD 00:00:00');
          if(this.idGetInfo.duedate){
            this.YJtime=this.moment(this.idGetInfo.duedate).format('YYYY-MM-DD 00:00:00') ;
          }
          this.SJtime=this.moment(this.idGetInfo.issuedTime).format('YYYY-MM-DD 00:00:00');
          console.log(this.idGetInfo);
        }
        if (res.code === 510) {
          this.$message.warning(res.msg);
        }
        this.loading = false;
      });
    },
    
  },
};
</script>

<style>
</style>